<!DOCTYPE html>
<html>
<head>
    <title>Customizing appearance</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" id="dark-theme" data-title="Dark">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" href="#/" data-role="backbutton">Back</a>
            <span data-role="view-title">Dark Theme</span>
            <a data-align="right" data-role="button" href="#light-theme">Light Theme</a>
        </div>
    </header>
    <div id="scrollview-container">
	<div data-role="scrollview">
	    <div class="photo photo1">
            </div><div class="photo photo2" data-role="page">
            </div><div class="photo photo3" data-role="page">
            </div><div class="photo photo4" data-role="page">
            </div><div class="photo photo5" data-role="page">
            </div><div class="photo photo6" data-role="page">
            </div><div class="photo photo7" data-role="page">
            </div><div class="photo photo8" data-role="page">
            </div><div class="photo photo9" data-role="page">
            </div><div class="photo photo10" data-role="page">
            </div>
	</div>
    </div>
</div>

<div data-role="view" id="light-theme" data-title="Light">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" href="#/" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title">Light Theme</span>
            <a data-align="right" data-role="button" href="#dark-theme">Dark Theme</a>
        </div>
    </header>
    <div id="scrollview-container">
	<div data-role="scrollview">
	    <div class="photo photo1">
            </div><div class="photo photo2" data-role="page">
            </div><div class="photo photo3" data-role="page">
            </div><div class="photo photo4" data-role="page">
            </div><div class="photo photo5" data-role="page">
            </div><div class="photo photo6" data-role="page">
            </div><div class="photo photo7" data-role="page">
            </div><div class="photo photo8" data-role="page">
            </div><div class="photo photo9" data-role="page">
            </div><div class="photo photo10" data-role="page">
            </div>
	</div>
    </div>
</div>
<style scoped>

#dark-theme .km-content,
#dark-theme .km-navbar {
    background-color: #111;
}

/* iOS pager */
.km-ios #dark-theme .km-pages .km-current-page {
    background: #ff009c;
}
#light-theme .km-content,
#light-theme .km-navbar {
    background-color: #ddd;
}

/* WP8 pager */
.km-wp-dark #light-theme .km-content,
.km-wp-dark  #light-theme .km-navbar {
    background-color: #fff;
}
.km-wp-dark #light-theme .km-pages > li {
    background-color: #000;
}

/* Flat pager */
.km-flat #dark-theme .km-navbar {
    color: #fff;
}
.km-flat #dark-theme .km-pages li {
    background-color: rgba(255, 255, 255, 0.3);
}
.km-flat #dark-theme .km-pages .km-current-page {
    background: #10c4b2;
}
#light-theme .km-view-title {
    color: #666;
    text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
.km-tablet .km-ios #dark-theme .km-view-title {
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0,.5);
}
.km-ios7 #dark-theme .km-view-title,
.km-tablet .km-ios7 #dark-theme .km-view-title {
    color: #fff;
    text-shadow: none;
}
.km-ios7 #light-theme .km-view-title,
.km-tablet .km-ios7 #light-theme .km-view-title {
    text-shadow: none;
}
.km-android #light-theme .km-text {
	color: #666;
}

#dark-theme .photo,
#light-theme .photo {
    margin: 0;
    height: 15em;
    display: inline-block;
    -webkit-background-size: auto 100%;
    -webkit-transform: translatez(0);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.photo1 {background-image: url("../content/mobile/cities/220/sydney.jpg");}
.photo2 {background-image: url("../content/mobile/cities/220/bonn.jpg");}
.photo3 {background-image: url("../content/mobile/cities/220/boston.jpg");}
.photo4 {background-image: url("../content/mobile/cities/220/cairo.jpg");}
.photo5 {background-image: url("../content/mobile/cities/220/cancun.jpg");}
.photo6 {background-image: url("../content/mobile/cities/220/cape-town.jpg");}
.photo7 {background-image: url("../content/mobile/cities/220/liverpool.jpg");}
.photo8 {background-image: url("../content/mobile/cities/220/london.jpg");}
.photo9 {background-image: url("../content/mobile/cities/220/melbourne.jpg");}
.photo10 {background-image: url("../content/mobile/cities/220/san-francisco.jpg");}

#scrollview-container {
    margin: 45px 0 1em 0;
    padding-bottom: 20px;
    padding-top: 20px;
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.3);
    border-width: 1px 0;
}
.km-flat #scrollview-container {
    background: transparent;
    border: 0;
    box-shadow: none;
}
</style>


    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
